<template>
  <qc-page-table
    ref="userDeptPageTableRef"
    :columns="columns"
    :loadData="loadData"
    :rowKey="(record) => record[primaryKey]"
  >
    <template #toolbarButton>
      <qc-add-button @click="addButtonClick"></qc-add-button>
      <qc-delete-button @click="deleteButtonClick"></qc-delete-button>
    </template>
    <template #toolbarTitle>
      {{ t('org.user-dept.departmentInfo') }}
    </template>
    <template #customMain="{ record }">
      <a-switch v-model:checked="record.main" @change="updateUserDept(record, { updateKey: 'main' })" />
    </template>
    <template #customValid="{ record }">
      <a-switch v-model:checked="record.valid" @change="updateUserDept(record)" />
    </template>
    <template #customTimeEnd="{ record }">
      <a-date-picker
        style="width: 160px"
        v-model:value="record.timeEnd"
        valueFormat="YYYY-MM-DD"
        @change="updateUserDept(record)"
      />
    </template>
  </qc-page-table>
  <dept-tree-modal
    v-if="visibleModal"
    v-model:visible="visibleModal"
    @ok="handleOk"
    :disabledKeys="disabledKeys"
  ></dept-tree-modal>
</template>
<script lang='ts'>
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import userDeptApi from '/@/api/org/user-dept'
import { userDeptTableColumns } from './interface'
import DeptTreeModal from '/@/views/org/dept/component/dept-tree-modal.vue'
import { useModelPageTable } from '/@/kit/model-kit'

export default defineComponent({
  name: 'UserDeptList',
  props: {
    userId: {
      type: String,
      required: true,
    },
  },
  components: {
    DeptTreeModal,
  },
  setup(props) {
    const { t } = useI18n()
    const userDeptPageTableRef = ref(null)
    const queryParam = { userId: props.userId } //查询参数 公用
    const { primaryKey, searchTable, reloadTable, loadData, deleteSelectData } = useModelPageTable(
      userDeptPageTableRef,
      userDeptApi,
      queryParam
    )

    const userState = reactive({
      columns: userDeptTableColumns, //用户部门关联列表配置对象
      primaryKey,
      loadData,
      //更新用户部门信息
      updateUserDept: (record: any, extData?: any) => {
        userDeptApi.update(record, extData).then((res) => {
          reloadTable()
        })
      },
      //新建用户关联信息
      addButtonClick: () => {
        //查询已有关联的数据
        userDeptApi.list(queryParam).then((res) => {
          let arr: Array<string> = []
          res.data.data.forEach((item: any) => arr.push(item.deptId))
          userState.disabledKeys = arr
          userState.visibleModal = true
        })
      },
      //删除用户部门关联信息
      deleteButtonClick: () => deleteSelectData(),
      disabledKeys: [] as Array<string>, //已有关联部门的部门id数组 设置为禁用
      visibleModal: false, //是否显示部门弹窗
      //弹窗确认保存事件
      handleOk: (kyes: Array<string>) => {
        let userDeptList = []
        kyes.forEach((key) => {
          userDeptList.push({ userId: props.userId, deptId: key })
        })
        userDeptApi.addBatch(userDeptList).then((res) => {
          userState.visibleModal = false
          reloadTable()
        })
      },
    })
    onMounted(() => searchTable())
    return {
      t,
      userDeptPageTableRef,
      ...toRefs(userState),
    }
  },
})
</script>